<template>
    <div class="interviewappraisal">
        <!-- 主体内容 -->
        <div class="container">
            <!-- 左边 -->
            <div class="content_c1000">
                <!-- 的面试评价 -->
                <div class="marg_bottom40 content_l2202">
                    <div class="content_c6600 fontsize_18">
                        <div class="span_l1100"><span class="color_1791381">以太创服</span><span class="color_808080">的面试评价（30）</span></div>
                        <div class="hline"></div>
                    </div>  
                    <!-- 评分 -->
                    <div class="dis_flex content_l1100">
                        <span class="fontsize_14 color_808080 marg_right15">综合评分:</span>
                        <div class="marg_right15 contentl1101">
                            <el-rate
                            v-model="value"
                            disabled
                            show-score
                            text-color="#ff9900"
                            score-template="{value}">
                            </el-rate>
                        </div>                        
                        <span class="fontsize_12 color_1616161">（来自34份评价）</span>
                    </div>                   
                    <div class="dis_flex fontsize_12 color_1616161 content_l1103">
                        <div class="dis_flex">
                            <span>描述相符</span>
                            <div class="marg_right15">
                                <el-rate
                                v-model="value"
                                disabled
                                show-score
                                text-color="#ff9900"
                                score-template="{value}">
                                </el-rate>
                            </div>
                        </div>
                        <!-- 样式分割线 -->
                        <div class="vline"></div>
                        <div class="dis_flex">
                            <span>面试官</span>
                            <div class="marg_right15">
                                <el-rate
                                v-model="value"
                                disabled
                                show-score
                                text-color="#ff9900"
                                score-template="{value}">
                                </el-rate>
                            </div>
                        </div>
                        <!-- 样式分割线 -->
                        <div class="vline"></div>
                        <div class="dis_flex">
                            <span>公司环境</span>
                            <div class="marg_right15">
                                <el-rate
                                v-model="value"
                                disabled
                                show-score
                                text-color="#ff9900"
                                score-template="{value}">
                                </el-rate>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 评论展示区 -->
                <div class="content_l2000" v-for="item in commentList" :key="item.id">
                    <div class="content_l2202">
                        <div class="dis_flex">
                            <img src="../assets/343.jpeg" class="image_header">
                            <!-- 右边内容 -->
                            <div>
                                <div class="fontsize_12 color_1616161 content_l2200">
                                    <div><span class="fontsize_14 color_808080">赵若瑶</span></div>
                                    <div class="dis_flex">
                                        <span>综合评分：</span>
                                        <div class="marg_right15">
                                            <el-rate
                                            v-model="value"
                                            disabled
                                            text-color="#ff9900"
                                            score-template="{value}">
                                            </el-rate>
                                        </div>
                                    </div>
                                    <div>
                                        <span>面试职位：</span>
                                        <span class="color_808080">娱乐编导</span>
                                        <span>（已下线）</span>
                                    </div>
                                    <div><span>2017-09-10</span></div>
                                </div>
                                <div class="margintop_8">
                                    <span class="span_l2000 fontsize_12 color_808080">面试官很nice</span>
                                </div>
                                <!-- 面试过程 -->
                                <div class="fontsize_14 color_808080 marg_top20">
                                    <span class="color_1616161">[面试过程]</span>
                                    <span class="marginleft_10 lineheight">{{ item.processComment }}</span>
                                </div>
                                <!-- 其他评价 -->
                                <div class="fontsize_14 color_808080">
                                    <span class="color_1616161">[其他评价]</span>
                                    <span class="marginleft_10 lineheight">{{ item.otherComment }}</span>
                                </div>
                                <div>
                                    <div class="dis_flex">
                                        <span class="fontsize_14 color_1616161 marg_top10 span_l3000 marg_right15" v-if="item.hrComment.length">企业回复</span>
                                        <div class="vline_10"></div>
                                        <span class="fontsize_14 color_1791381 marg_top10">有用(27)</span>
                                    </div>
                                    <div v-if="item.hrComment.length">
                                        <div class="triangle"></div>
                                        <div class="rectangle">
                                            <!-- 内容 -->
                                            <div class="dis_center content_hr1100">
                                                <img src="../assets/325.png" class="image_hr">
                                                <div class="content_hr1000">
                                                    <span class="color_1616161">{{ item.hrComment[0].post }}</span>
                                                    <span class="marg_top10">{{ item.hrComment[0].text }}</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 分页栏 -->
                <div class="conten_l6000">
                    <el-pagination
                        :page-size="8"
                        :pager-count="8"
                        layout="prev, pager, next"
                        :total="100">
                    </el-pagination>
                </div>                
            </div>
            <!-- 右边 -->
            <div class="conten_r1000">
                <!-- 头部 -->
                <div class="marg_bottom40">
                    <div class="content_r2000">
                        <img src="../assets/104.jpg" class="iamge_r1000">
                        <div class="span_r2000 fontsize_16 color_808080">
                            <span>以太创服</span>
                            <img  src="../assets/71.svg" class="image_l4400">
                        </div>
                    </div>
                    <div class="span_lable">
                        <span>“专注于计算机视觉和深度学习原创技术”</span>
                    </div>
                    <div class="content_c6600">
                        <span class="fontsize_14 color_808080 span_c6600">公司基本信息</span>
                        <div class="hline"></div>
                    </div>                    
                    <div class="marg_top20">
                        <div class="fontsize_14 content_r3000">
                            <img src="../assets/101.svg" class="image_l1300">
                            <span class="color_1616161">电子商务</span>
                        </div>
                        <div class="fontsize_14 content_r3000">
                            <img src="../assets/102.svg" class="image_l1300">
                            <span class="color_1616161">不需要融资</span>
                        </div>
                        <div class="fontsize_14 content_r3000">
                            <img src="../assets/103.svg" class="image_l1300">
                            <span class="color_1616161">50-150人</span>
                        </div>
                        <div class="fontsize_14 content_r3000">
                            <img src="../assets/66.svg" class="image_l1300">
                            <span class="color_1616161">北京</span>
                        </div>
                    </div>
                </div>
                <!-- 中间部分 -->
                <div class="">
                    <div>
                        <div class="content_c6600">
                            <span class="fontsize_14 color_808080 span_c6660">招聘职位 ( 233 )</span>
                            <div class="hline"></div>
                        </div>  
                        <!-- 单个列表样式 -->
                        <div class="marg_top20 dis_flex content_c2200 marg_bottom20" v-for="item in positionList.slice(0,4)">
                            <div class="fontsize_14 content_c2202">
                                <span class="color_808080">{{ item.post }}</span>
                                <div class="content_r1111">
                                    <span class="color25598">{{ item.salary }}</span>
                                    <span class="color_1616161">{{ item.dataTime }}</span>
                                </div>
                            </div>
                        </div> 
                        <!-- 查看更多相似职位 -->
                        <div class="dis_center">
                            <router-link to="" class="link_f1000">查看更多相似职位</router-link>
                            <img src="../assets/175.svg" class="image_f1000">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import "@/assets/css/global.css"
export default{
    name: 'OccupationDetails',
    data(){
        return{
            tipList:[
                {image:require('../assets/189.jpg'),post:'招聘专员',salary:'8K-12K',company:'果壳网'},
                {image:require('../assets/189.jpg'),post:'招聘专员',salary:'8K-12K',company:'果壳网'},
                {image:require('../assets/189.jpg'),post:'招聘专员',salary:'8K-12K',company:'果壳网'},
                {image:require('../assets/189.jpg'),post:'招聘专员',salary:'8K-12K',company:'果壳网'},
                {image:require('../assets/189.jpg'),post:'招聘专员',salary:'8K-12K',company:'果壳网'},
                {image:require('../assets/189.jpg'),post:'招聘专员',salary:'8K-12K',company:'果壳网'},
            ],
            recommendCompanyList:[
                {image:require('../assets/129.jpg'),company:'王小二',salary:'8k-12k',area:'阳光保险集团[北京·工体]'},
                {image:require('../assets/129.jpg'),company:'王小二',salary:'8k-12k',area:'阳光保险集团[北京·工体]'},
                {image:require('../assets/129.jpg'),company:'王小二',salary:'8k-12k',area:'阳光保险集团[北京·工体]'},
                {image:require('../assets/129.jpg'),company:'王小二',salary:'8k-12k',area:'阳光保险集团[北京·工体]'},
                {image:require('../assets/129.jpg'),company:'王小二',salary:'8k-12k',area:'阳光保险集团[北京·工体]'},
                {image:require('../assets/129.jpg'),company:'王小二',salary:'8k-12k',area:'阳光保险集团[北京·工体]'},
                {image:require('../assets/129.jpg'),company:'王小二',salary:'8k-12k',area:'阳光保险集团[北京·工体]'},
                {image:require('../assets/129.jpg'),company:'王小二',salary:'8k-12k',area:'阳光保险集团[北京·工体]'},
                {image:require('../assets/129.jpg'),company:'王小二',salary:'8k-12k',area:'阳光保险集团[北京·工体]'},
            ],
            positionList:[
                {post:'UI设计师',salary:'8k-12k',dataTime:'8:59:03'},
                {post:'UI设计师',salary:'8k-12k',dataTime:'8:59:03'},
                {post:'UI设计师',salary:'8k-12k',dataTime:'8:59:03'},
                {post:'UI设计师',salary:'8k-12k',dataTime:'8:59:03'},
            ],
            value: 4.5,
            visible:false,
            isReplyValue:true,
            commentList:[
                {id:1,
                processComment:'整体感觉是不错的，hr也非常耐心和细心，之后布置的作业因为自己去外地面试另一家公司给耽误了，所以没来得及完成，希望之后有机会共事吧。',
                otherComment:'司环境非常好，稍稍有点偏远，但是非常年轻化 也挺有活力的',
                hrComment:[{post:'橘子娱乐  ·  HR  ·  人力资源经理',
                            text:'非常感谢您对橘子娱乐的关注和肯定，也非常感谢您来参加面试，祝您生活愉快！'
                        }]
                },
                {id:2,
                processComment:'整体感觉是不错的，hr也非常耐心和细心，之后布置的作业因为自己去外地面试另一家公司给耽误了，所以没来得及完成，希望之后有机会共事吧。',
                otherComment:'司环境非常好，稍稍有点偏远，但是非常年轻化 也挺有活力的',
                hrComment:[]
                },
                {id:3,
                processComment:'整体感觉是不错的，hr也非常耐心和细心，之后布置的作业因为自己去外地面试另一家公司给耽误了，所以没来得及完成，希望之后有机会共事吧。',
                otherComment:'司环境非常好，稍稍有点偏远，但是非常年轻化 也挺有活力的',
                hrComment:[]
                },
                {id:4,
                processComment:'整体感觉是不错的，hr也非常耐心和细心，之后布置的作业因为自己去外地面试另一家公司给耽误了，所以没来得及完成，希望之后有机会共事吧。',
                otherComment:'司环境非常好，稍稍有点偏远，但是非常年轻化 也挺有活力的',
                hrComment:[{post:'橘子娱乐  ·  HR  ·  人力资源经理',
                            text:'非常感谢您对橘子娱乐的关注和肯定，也非常感谢您来参加面试，祝您生活愉快！'
                        }]
                },
                {id:5,
                processComment:'整体感觉是不错的，hr也非常耐心和细心，之后布置的作业因为自己去外地面试另一家公司给耽误了，所以没来得及完成，希望之后有机会共事吧。',
                otherComment:'司环境非常好，稍稍有点偏远，但是非常年轻化 也挺有活力的',
                hrComment:[],
                },
            ],
        }
    }

}
</script>

<style scoped>

/* 共用样式 */
    .fontsize_18{
        font-size: 18px;
    }

    .fontsize_16{
        font-size: 16px;
    }

    .fontsize_14{
        font-size: 14px;
    }

    .fontsize_12{
        font-size: 12px;
    }

    .color_8585851{
        color: rgba(85, 85, 85, 1);
    }

    .color_1616161{
        color: rgba(166, 166, 166, 1);
    }

    .color_128128{
        color: rgba(128, 128, 128, 1);
    }

    .color_1791381{
        color: rgba(76, 176, 141, 1);
    }

    .color_56561{
        color: rgba(56, 56, 56, 1);
    }

    .color_808080{
        color: rgba(80, 80, 80, 1);
    }

    .color25598{
        color: rgba(255, 98, 0, 1);
    }

    .backcolor_1791381{
        background-color: rgba(76, 176, 141, 1);
    }

    .backcolor_229229229{
        background-color: rgba(229, 229, 229, 1);
    }

    .backcolor_250250250{
        background-color: rgba(250, 250, 250, 1);
    }

    .border{
        border: rgba(229, 229, 229, 1) solid 1px;
    }

    .border_left{
        border-left: rgba(229, 229, 229, 1) solid 1px;
    }

    .color_white{
        color: white;
    }

    .border_none{
        border: none;
        background-color: transparent;
    }

    .text_h1005{
        margin-top: 5px;
    }

    .margintop_8{
        margin-top: 8px;
    }

    .font_weight{
        font-weight: bold;
    }

    .dis_flex{
        display: flex;
    }

    .dis_center{
        display: flex;
        align-items: center;
    }

    .marg_top20{
        margin-top: 20px;
    }

    .marg_top10{
        margin-top: 10px;
    }

    .lineheight{
        line-height: 1.5;
    }

    .span_l3000{
        padding-right: 7px;
        border-right: rgba(166, 166, 166, 1) solid 1px;
    }

    .triangle{
        height: 10px;
        width: 18px;
        margin-left: 20px;
        background-color: rgba(245, 245, 245, 1);
        clip-path: polygon(50% 0, 100% 100% , 0 100%);
        border: rgba(204, 204, 204, 1) solid 1px;
    }

    .rectangle{
        width: 600px;
        height: 80px;
        background-color: rgba(245, 245, 245, 1);
        border: rgba(204, 204, 204, 1) solid 1px;
        border-radius: 4px;        
    }

    .content_hr1100{
        padding: 5px 0;
    }

    .image_hr{
        height: 65px;
        clip-path: circle();
    }

    .content_hr1000{
        margin-left: 15px;
        font-size: 14px;
        display: flex;
        flex-direction: column;
    }

    .conten_l6000{
        margin-top: 30px;
        text-align: center;
    }

    :deep(.el-pager li.active){
        border: rgba(76, 176, 141, 1) solid 1px;
        border-radius:4px;
        color: rgba(76, 176, 141, 1);
    }

    :deep(.btn-prev){
        border: rgba(204, 204, 204, 1) solid 1px;
        padding: 0px 3px;
        border-radius:4px;
        font-weight: bold;
    }

    :deep(.btn-next){
        border: rgba(204, 204, 204, 1) solid 1px;
        padding: 0px 3px;
        border-radius:4px;
        font-weight: bold;
    }



    .marg_bottom20{
        margin-bottom: 20px;
    }

    .marg_bottom40{
        margin-bottom: 40px;
    }

    .marginleft_10{
        margin-left: 10px;
    }

    .marg_right15{
        margin-right: 15px;
    }

    .vline{
        margin-left: 0px;
        height: 20px;
        width: 1px;
        background-color: rgba(166, 166, 166, 1);
        transform: rotate(90edg);
    }

    .hline{
        width: 100%;
        height: 1px;
        background-color: rgba(221, 220, 220, 1);
    }

/*  */

    .container{
        margin-top: 120px;
        margin-left: 200px;
        width: 80%;
        margin-bottom: 80px;
        display: flex;
    }

    .content_c1000{
        width: 65%;
        padding-right: 150px;
        border-right: rgba(229, 229, 229, 1) solid 4px;
    }

    .span_l1100{
        width: 330px;
    }

    .content_l1100{
        margin-top: 40px;
        align-items: center;
    }

    .contentl1101 :deep(.el-rate__icon){
        font-size: 25px;
    }

    .contentl1101 :deep(.el-rate__text){
        font-size: 20px;
    }

    .content_l1103{
        margin-top: 20px;
        justify-content: space-between;
    }

    .content_l2000{
        margin-top: 25px;
    }

    .content_l2202{
        border-bottom: rgba(153, 153, 153, 1) dashed 1px;
        padding-bottom: 25px;
    }

    .image_header{
        height: 58px;
        clip-path: circle();
        margin-right: 20px;
    }

    .content_l2200{
        display: flex;                 
        justify-content: space-between;
        align-items: center;
    }

    .span_l2000{
        padding: 3px 5px;
        border-radius: 11px;
        border: rgba(204, 204, 204, 1) solid 1px;
    }

    .image_l1300{
        height: 18px;
        margin-right: 15px;
    }

    .content_c6600{
        display: flex;
        align-items: center;
    }

    .span_c6660{
        width: 200px;
    }

    .span_c6600{
        width: 130px;
    }

    .conten_r1000{
        margin-left: 30px;
    }

    .content_r2000{
        display: flex;
    }

    .span_lable{
        font-size: 14px;
        color: rgba(80, 80, 80, 1);
        margin: 30px 0;
    }

    .iamge_r1000{
        height: 115px;
    }

    .image_l4400{
        margin-left: 5px;
        height: 20px;
    }

    .content_r3000{
        margin-top: 8px;
        display: flex;
        align-items: center;
    }

    .span_r2000{
        margin-left: 20px;
        display: flex;
        align-items: end;
    }

    .content_c2200{
        padding-bottom: 20px;
        border-bottom: rgba(229, 229, 229, 1) dashed 2px;        
    }

    .content_c2202{
        width: 100%;
    }

    .content_r1111{
        margin-top: 8px;
        display: flex;
        justify-content: space-between;
    }

    .image_f1000{
        height: 30px;
        margin-left: 5px;
    }

    .link_f1000{
        text-decoration: none;
        font-size: 14px;
        color: rgba(80, 80, 80, 1);
    }

    .link_f1000:hover{
        color: rgba(0, 179, 138, 1);
    }

</style>